<template>
  <AvicSplit>
    <AvicPane size="25">
      <div class="tree_box" style="height: 100%">
        <a-spin :spinning="loading">
          <a-tree
            v-if="treeData && treeData.length > 0"
            v-model:selectedKeys="selectedKeys"
            v-model:expanded-keys="expandedKeys"
            :tree-data="treeData"
            show-icon
            default-expand-all
            :block-node="true"
            :show-line="true && { showLeafIcon: false }"
            @select="onSelect"
          >
            <template #title="{ dataRef }">
              {{
                dataRef.nodeType == 'process' && dataRef.attributes.version
                  ? dataRef.title + '-V' + dataRef.attributes.version
                  : dataRef.title
              }}
            </template>
            <template #icon="{ expanded, dataRef }">
              <AvicIcon
                v-if="dataRef.nodeType === 'dynamicClassic' && dataRef.id === 'root'"
                svg="avic-server-fill"
                color="rgb(51 112 255)"
              />
              <AvicIcon
                v-else-if="(dataRef.nodeType === 'dynamicClass' || dataRef.nodeType === 'dynamicClassic') && !expanded"
                svg="avic-folder-3-fill"
                color="#ffb800"
              />
              <AvicIcon
                v-else-if="(dataRef.nodeType === 'dynamicClass' || dataRef.nodeType === 'dynamicClassic') && expanded"
                svg="avic-folder-open-fill"
                color="#ffb800"
              />
              <AvicIcon v-else-if="dataRef.nodeType === 'dynamicApp'" svg="avic-stack-fill" color="#3370ff" />
              <AvicIcon v-else-if="dataRef.nodeType === 'dynamicType'" svg="avic-checkbox-multiple-blank-fill" color="#ffb800" />
              <avic-icon v-if="dataRef.nodeType == 'process'" svg="avic-git-pull-request-fill" color="#0fc6c2" />
            </template>
          </a-tree>
          <a-empty v-else :image="simpleImage" />
        </a-spin>
      </div>
    </AvicPane>
    <AvicPane>
      <div class="table-wrapper">
        <AvicTable
          :columns="columns"
          :data-source="data"
          :loading="loading1"
          :show-table-setting="false"
          :row-key="(record) => record.dbId"
          :row-selection="{
            type: selectType != 'single' ? 'checkbox' : 'radio',
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
            columnWidth: selectType != 'single' ? 40 : 0,
            fixed: true
          }"
          :row-click-selection-type="selectType != 'single' ? 'checkbox' : 'radio'"
          :page-parameter="queryParam.pageParameter"
          :total="totalPage"
          :pagination-simple="true"
          @change="handleTableChange"
          @refresh="getList"
        >
          <template #toolBarLeft>
            <a-input-search
              class="opt-btn-commonsearch"
              style="width: 200px"
              placeholder="请输入标题"
              :allow-clear="true"
              @search="searchByKeyWord"
            />
          </template>
          <template #bodyCell="{ column, index }">
            <template v-if="column.key === 'id'">
              {{ index + 1 + queryParam.pageParameter.rows * (queryParam.pageParameter.page - 1) }}
            </template>
          </template>
        </AvicTable>
      </div>
    </AvicPane>
  </AvicSplit>
</template>
<script lang="ts" setup>
import { httpAction } from '@/api/avic/bpm/FlowUtilApi';
import { getExpandedKeys, setNodeSlots } from '@/utils/tree-util'; // 引入树公共方法
import { Empty } from 'ant-design-vue';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['selectProcess']);
const props = defineProps({
  isMultiSelection: {
    type: Boolean,
    default: true
  }
});
const state = reactive({
  loading: false,
  loading1: false,
  treeData: [], // 树数据
  data: [], // 表格数据
  expandedKeys: [],
  selectedKeys: [],
  totalPage: 0,
  selectedRowKeys: [],
  columns: [
    {
      title: '序号',
      ellipsis: true,
      width: 56,
      align: 'center',
      key: 'id'
    },
    {
      title: '标题',
      ellipsis: true,
      width: 150,
      key: 'title',
      resizable: true,
      dataIndex: 'title',
      customRender(obj) {
        if (obj.text) {
          return obj.text;
        }
        if (obj.record.procDefName) {
          return obj.record.procDefName;
        }
        return '无';
      }
    },
    {
      title: '申请日期',
      dataIndex: 'startDate',
      ellipsis: true,
      sorter: true,
      resizable: true,
      key: 'startDate',
      width: 150,
      align: 'center',
      customRender: (obj) => {
        if (obj.text) {
          return proxy.$dateFormat(obj.text);
        }
        return '';
      }
    },
    {
      title: '当前节点',
      ellipsis: true,
      align: 'center',
      key: 'activityName',
      resizable: true,
      dataIndex: 'activityName'
    },
    {
      title: '状态',
      ellipsis: true,
      key: 'businessState',
      resizable: true,
      dataIndex: 'businessState',
      sorter: true,
      align: 'center',
      customRender: (obj) => {
        if (obj.text === 'active') {
          return '流转中';
        }
        if (obj.text === 'ended') {
          return '已完成';
        }
        if (obj.text === 'start') {
          return '拟稿中';
        }
        if (obj.text === 'suspended') {
          return '已挂起';
        }
        return obj.text;
      }
    },
    {
      title: '处理人',
      ellipsis: true,
      dataIndex: 'assigneeName',
      key: 'assigneeName',
      resizable: true
    }
  ]
});
const { loading, treeData, selectedRowKeys, expandedKeys, selectedKeys, columns, totalPage, data, loading1 } = toRefs(state);
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const selectType = props.isMultiSelection ? 'multi' : 'single'; // multi 多选 single 单选
const queryParam = reactive({
  // 请求表格数据参数
  pageParameter: {
    page: 1, // 页数
    rows: 20 // 每页条数
  },
  searchParams: {
    type: 2,
    nodeId: 'root',
    nodeType: '',
    title: '' // 搜索标题
  },
  sidx: null, // 排序字段
  sord: null // 排序方式: desc降序 asc升序
});

onMounted(() => {
  getTreeList();
  getList();
});
// 树数据
function getTreeList() {
  loading.value = true;
  const expandLevel = 2;
  treeData.value = [];
  expandedKeys.value = [];
  expandedKeys.value = [];
  httpAction('/bpm/center/getAppAndBpmModelTreeData/v1', '', 'get').then((response) => {
    setNodeSlots(response.data);
    getExpandedKeys(response.data, expandLevel, expandedKeys.value);
    treeData.value = response.data;
    initRootNode();
    loading.value = false;
  });
}
// 默认选择树第一条
function initRootNode() {
  if (treeData.value != null && treeData.value.length > 0) {
    // 默认选中第一个节点，并触发选中事件
    onSelect([treeData.value[0].id], {
      node: { dataRef: treeData.value[0] }
    });
  }
}
// 表格数据
function getList() {
  selectedRowKeys.value = []; // 清空选中
  loading1.value = true;
  httpAction('/bpm/center/searchHistProcessByPage/v1', queryParam, 'post').then((response) => {
    data.value = response.data.rows;
    totalPage.value = response.data.records;
    loading1.value = false;
  });
}
/** 表格排序 */
function handleTableChange(pagination, _filters, sorter) {
  queryParam.pageParameter.page = pagination.current;
  queryParam.pageParameter.rows = pagination.pageSize;
  if (proxy.$objIsNotBlank(sorter.field)) {
    queryParam.sidx = sorter.field;
    queryParam.sord = sorter.order === 'ascend' ? 'asc' : 'desc'; // 排序方式: desc降序 asc升序
  }
  getList();
}
// 表格选择
function onSelectChange(_selectedRowKeys) {
  selectedRowKeys.value = _selectedRowKeys;
  const selectProcess = data.value.filter((item) => selectedRowKeys.value.includes(item.dbId));
  emit('selectProcess', selectProcess);
}
// 搜索
function searchByKeyWord(value) {
  queryParam.pageParameter.page = 1;
  queryParam.searchParams.title = value;
  getList();
}
// 树选择
function onSelect(_selectedKeys, { node }) {
  queryParam.pageParameter.page = 1;
  selectedKeys.value = _selectedKeys;
  queryParam.searchParams.nodeType = node.dataRef.nodeType;
  if (node.dataRef.nodeType === 'process') {
    queryParam.searchParams.nodeId = node.dataRef.attributes.pdid;
  } else {
    queryParam.searchParams.nodeId = node.dataRef.id;
  }
  getList();
}
</script>
<style lang="less" scoped></style>
